<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div {
            margin: 1em;
        }
        span.label {
          display: inline-block;
          width: 10em;
          line-height: 200%;
        }

        span.narrow-label {
          display: inline-block;
          margin: 0 0.5em;
        }

        div.section {
          border: 1px solid grey;
          padding: 1em;
          width: 50em;
        }

        div#statusMessage {
            background-color: yellow;
            width: fit-content;
        }

        input.small-number {
            width: 2em;
         }

    </style>

    <script>

        function escapeHTML(text) {
            return text.replace(/[&<>]/g, (ch) => {
                return {'&':'&amp;', '>': '&gt;', '<': '&lt;'}[ch];
            })
        }

        function showStatus() {
          const message = new URL(window.location.href).searchParams.get("statusMessage");
          if (message) {
            document.getElementById("statusMessage").innerHTML = "Status: " + escapeHTML(message);
          }
        }
    </script>
</head>
<body onload="showStatus();">

<div class="section">
    <h1>Pub/Sub Admin -- create</h1>

    <div>
        <form action="/createTopic" method="post">
            <span class="label">Create topic</span>
            <input name="topicName" type="text" placeholder="topic name"> <input type="submit">
        </form>
    </div>
    <div>
        <form action="/createSubscription" method="post">
            <span class="label">Create subscription</span>
            <input name="subscriptionName" type="text" placeholder="subscription name">
            for topic
            <input name="topicName" placeholder="topic name"> <input type="submit">
        </form>
    </div>
</div>

<div class="section">
    <h1>Pub/Sub -- post and subscribe</h1>
    <div class="help">Send or retrieve/ack one message at a time</div>
    <div>
        <form action="/subscribe">
            <span class="label">Message Retrieval</span>
            <input name="subscription" type="text" placeholder="subscription">
            <input type="submit" value="Subscribe"> (acks one message at a time)
        </form>
    </div>
    <div>
        <form action="/postMessage">
            <span class="narrow-label">Send</span>
            <input class="small-number" name="count" type="text" value="1">
            <span class="narrow-label">copies of message</span>
            <input name="message" type="text" placeholder="message text">
            <span class="narrow-label">to topic</span>
            <input name="topicName" type="text" placeholder="topic name"> <input type="submit">
        </form>
    </div>
</div>

<div class="section">
    <h1>Pub/Sub -- batch pull</h1>
    <div class="help">Retrieve messages from different subscriptions, and ack as a batch</div>

    <div>
        <form action="/pull">
            <span class="label">Subscription1</span>
            <input name="subscription1" type="text" placeholder="first subscription name">
            <input type="submit" value="Pull From Single Subscription" formaction="/pull">
            <br/>
            <span class="label">Subscription2</span>
            <input name="subscription2" type="text" placeholder="second subscription name">
            <input type="submit" value="Pull From Both Subscriptions" formaction="/multipull">
        </form>
    </div>
</div>

<div class="section">
    <h1>Pub/Sub Admin -- delete</h1>

    <div>
        <form action="/deleteTopic" method="post">
            <span class="label">Delete topic</span>
            <input name="topic" type="text" placeholder="topic name"> <input type="submit">
        </form>
    </div>
    <div>
        <form action="/deleteSubscription" method="post">
            <span class="label">Delete subscription</span>
            <input name="subscription" type="text" placeholder="subscription name"> <input type="submit">
        </form>
    </div>
</div>

<div id="statusMessage">

</div>

</body>
</html>
